<template>
  <div class="bom-container">
    <el-card>
      <div class="table-header">
        <!-- <span class="title">生产BOM清单</span> -->
        <!-- <div class="actions">
          <el-button
            type="primary"
            @click="refreshData"
          >刷新</el-button>
          <el-button
            type="success"
            @click="exportExcel"
          >导出Excel</el-button>
        </div> -->
      </div>

      <el-table
        :data="bomData"
        border
        stripe
        max-height="50vh"
        v-loading="loading"
        element-loading-text="数据加载中..."
      >
        <el-table-column
          prop="WPNAME"
          label="工序名称"
          width="120"
        />
        <el-table-column
          prop="WSNAME"
          label="工段名称"
          width="120"
        />
        <el-table-column
          prop="MATCODE"
          label="物料编码"
          width="100"
          align="center"
        />
        <el-table-column
          prop="MATNAME"
          label="物料名称"
          width=""
        />
        <el-table-column
          prop="BOMDOSAGE"
          label="单台用量"
          width="100"
          align="center"
        />
        <el-table-column
          prop="BOMAMOUNT"
          label="总用量"
          width="100"
          align="center"
        />
        <el-table-column
          prop="ZGJ_TEXT"
          label="部件跟踪"
          width="100"
          align="center"
        >
          <template #default="{ row }">
            <el-tag :type="row.DATA3 === '0' ? 'primary' : 'success'">
              {{ row.ZGJ_TEXT }}
            </el-tag>
          </template>
        </el-table-column>
        <!-- <el-table-column
          prop="ROUTENO"
          label="工序顺序"
          width="100"
          align="center"
        /> -->
      </el-table>
    </el-card>
  </div>
</template>

<script>
export default {
  name: 'ProductionBomView',
  props: {
    workOrderId: {
      type: String,
      required: true
    },
    // 从父组件接收的BOM数据
    bomData: {
      type: Array,
      required: true,
      default: () => [],
      validator: (value) => {
        // 验证数据格式
        return true;
        // return value.every(item =>
        //   'MATCODE' in item &&
        //   'MATNAME' in item &&
        //   'BOMDOSAGE' in item &&
        //   'BOMAMOUNT' in item &&
        //   'DATA3' in item &&
        //   'ZGJ_TEXT' in item &&
        //   'ROUTENO' in item &&
        //   'WPNAME' in item &&
        //   'WSNAME' in item
        // );
      }
    }
  },
  data () {
    return {
      loading: false
    };
  },
  methods: {
    refreshData () {
      this.$emit('refresh-bom', this.workOrderID);
    },
    exportExcel () {
      this.$emit('export-excel', this.bomData);
    }
  }
}
</script>

<style scoped>
.bom-container {
  padding: 20px;
}

.table-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 15px;
}

.table-header .title {
  font-size: 18px;
  font-weight: bold;
}

.el-table {
  margin-top: 10px;
}

.el-tag {
  margin: 2px 0;
}
</style>